<template>
   <el-header class="header-item">
        <el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="!isCollapse?'logo-collapse-width':'logo-width'">
				{{!isCollapse?'我的系统':''}}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="el-icon-menu"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
   </el-header>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from '../../util/bus.js'
export default {
    name:'headerItem',
    data() {
       return {
            isCollapse:false,
            sysUserName:'苏某某',
            sysUserAvatar:'http://p1.qhmsg.com/dm/110_110_100/t01a78d48d0597a2593.jpg'
        }
    },
//	创建实例时就会触发
    created() {
        
    },
    mounted() {
        
    },
//	检测视图值变化触发，有改变就会触发
    computed:{
        
    },
    methods:{
      collapse:function(){
        //   触发
          Bus.$emit('val', this.isCollapse=!this.isCollapse)
      }  
    },
    components: {
        
    },
}
</script>